<template>
    <div>
        <el-menu
                :default-active="activePath"
                 style="position: fixed;z-index:100;width:100vw;box-shadow: 0 2px 4px #808595"
                 active-text-color="#0a3d62"
                 text-color="#697b8c"
                :router="true"
                 mode="horizontal" @select="handleSelect">
            <el-menu-item >
                <img class="img_logo" src="../assets/img/road.png" alt="logo">
                <span style="color: #0a3d62;margin-left: 10px">道路病害检测大数据平台系统</span>
            </el-menu-item>
            <el-menu-item index="Map" @click="saveNavState('Map')">
                <i class="img_icon el-icon-map-location"> 地图浏览 </i>
                <div class="kuai"> </div>
            </el-menu-item>
            <el-menu-item index="" @click="saveNavState('File')">
                <i class="img_icon el-icon-files"> 文件浏览 </i>
                <div class="kuai"> </div>
            </el-menu-item>
            <el-menu-item index="Data" @click="saveNavState('Data')">
                <i class="img_icon el-icon-s-data"> 数据浏览 </i>
               <div class="kuai"> </div>
            </el-menu-item>
            <!--            跳转去登陆-->
            <el-menu-item @click="ToExit" class="nav_left">
                <span style="margin-left: 30px">退出</span>
            </el-menu-item>
        </el-menu>
        <!--      右侧内容主体-->
        <div >

            <!--        路由占位符-->
            <router-view></router-view>


        </div>
    </div>
</template>

<script>
    export default {
        name: "Main",
        data(){
            return{
                activePath: ''
            }
        },
        created() {
            this.activePath = window.sessionStorage.getItem('activePath') ? window.sessionStorage.getItem('activePath') : 'Map'
        },
        methods:{
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
            // 保存链接的激活状态
            saveNavState (activePath) {
                window.sessionStorage.setItem('activePath', activePath)
                this.activePath = window.sessionStorage.getItem('activePath')
            },
            //    退出
            ToExit(){

            }
        }
    }
</script>

<style scoped>
    .img_logo{
        width: 46.4px;
        height:80%;
    }
    .img_icon{
        vertical-align: middle;
        font-size: 14px !important;
        height: 14px !important;
        width: 14px !important;
        margin-right: 8px;
    }
    .nav_left{
        float: right !important;
    }
    .kuai{
        width: 100px;
    }
</style>
